import { Notification } from 'element-ui'

export default {
    data() {
        return {
            showRainMesh: true,
            PredictionRainParams: {},
            pointImg: require('@/assets/map/pointWhite.png')
        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        },
        pageState() {
            // return this.$store.getters.pageState
            return JSON.parse(JSON.stringify(this.$store.getters.pageState))
        }
    },

    beforeDestroy() {
        this.clearPredictionRain()
        this.clearImgYBJYLadar()
        // this.$eventBus.$off('EB_YB_Mesh_CardSel');
        // this.$eventBus.$off('EB_YJ_TAB_Change');
        this.$eventBus.$off('EB_YB_MESH');
        
        
    },
    created() {
        this.entitiesPolygonPredictionRain = new Map()

        this.entitiesPolygonPredictionRain2H = new Map()
        this.imgYBJYLadar = null

        this.$eventBus.$on('EB_YB_Mesh_CardSel', res => {
            this.PredictionRainParams = res
            this.showMeshPredictionRain()
        })
        // 监听tabchange事件
        this.$eventBus.$on('EB_YJ_TAB_Change', res => {
            // console.log(res)
            if (res.mdName === '风险预警') {
                this.showMeshPredictionRain()
            } else {
                this.hidePredictionRain()
            }
        })
        //
        this.$eventBus.$on('EB_YB_MESH', res => {
            if (res) {
                this.showMeshPredictionRain()
            } else {
                this.hidePredictionRain()
                // this.clearImgYBJYLadar()
            }
        })
    },
    mounted() {
        this.$nextTick(() => {
            this.getMeshPredictionRain()
            this.getMeshPredictionRain2H()
        })
    },
    methods: {
        showMeshPredictionRain() {
            if (this.$route.path === '/prediction/Measured') {
                if (this.pageState.YB === 'YB_YB') {
                    this.creatPredictionRain(this.PredictionRainParams.id, this.PredictionRainParams.step)
                }
            }
            if (this.$route.path === '/earlyWarning/EarlyWarningInfo/index') {
                if (this.pageState.YJ === 'QX_YB') {
                    this.creatPredictionRain(this.PredictionRainParams.id, this.PredictionRainParams.step)
                }
            }
        },
        getMeshPredictionRain() {
            var urlJson = `${mapConfig.resUrlPre}/geojson/rainPrediction.json`
            this.$axios.get(urlJson).then(res => {
                res.data.features.forEach(feature => {
                    var coordinates = feature.geometry.coordinates[0]
                    var id = feature.properties.Id
                    var x = (coordinates[0][0] + coordinates[2][0]) / 2
                    var y = (coordinates[0][1] + coordinates[2][1]) / 2
                    var lonlats = [] // 每个四边形的四角lonlat
                    coordinates.forEach((lonlat, index) => {
                        if (index < 4) {
                            lonlats.push(lonlat[0])
                            lonlats.push(lonlat[1])
                        }
                    })

                    var polyEntity = {
                        eventName: 'PredictionRain',
                        drp: '0mm',
                        position: Cesium.Cartesian3.fromDegrees(x, y),
                        label: {
                            text: '0',
                            disableDepthTestDistance: Number.POSITIVE_INFINITY, // 永远禁用深度测试
                            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                            verticalOrigin: Cesium.VerticalOrigin.CENTER,
                            pixelOffset: new Cesium.Cartesian2(0, 0),
                            scaleByDistance: new Cesium.NearFarScalar(0, 1.25, 50000, 0.75),
                            backgroundColor: Cesium.Color.BLUE,
                            // showBackground: true,
                            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                            fillColor: Cesium.Color.WHITE,
                            outlineColor: Cesium.Color.WHITE,
                            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                            font: '14px sans-serif',
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 25000)

                        },
                        polygon: {
                            hierarchy: Cesium.Cartesian3.fromDegreesArray(lonlats),
                            material: Cesium.Color.fromRandom().withAlpha(0.5)
                            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(nearFar, 500000)
                        },
                        polyline: {
                            positions: Cesium.Cartesian3.fromDegreesArray(lonlats),
                            material: Cesium.Color.fromRandom().withAlpha,
                            clampToGround: true
                            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(nearFar, 500000)
                        },
                        show: false
                    }
                    this.entitiesPolygonPredictionRain.set(id, this.$viewer.entities.add(polyEntity))
                })
            })
        },
        getMeshPredictionRain2H() {
            var urlJson = `${mapConfig.resUrlPre}/geojson/2H_GRID.json`
            this.$axios.get(urlJson).then(res => {
                res.data.features.forEach(feature => {
                    var coordinates = feature.geometry.coordinates[0]
                    var id = feature.properties.ID1
                    var x = (coordinates[0][0] + coordinates[2][0]) / 2
                    var y = (coordinates[0][1] + coordinates[2][1]) / 2
                    var lonlats = [] // 每个四边形的四角lonlat
                    coordinates.forEach((lonlat, index) => {
                        if (index < 4) {
                            lonlats.push(lonlat[0])
                            lonlats.push(lonlat[1])
                        }
                    })

                    var polyEntity = {
                        eventName: 'PredictionRain',
                        drp: '0mm',
                        position: Cesium.Cartesian3.fromDegrees(x, y),
                        label: {
                            text: '0',
                            disableDepthTestDistance: Number.POSITIVE_INFINITY, // 永远禁用深度测试
                            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                            verticalOrigin: Cesium.VerticalOrigin.CENTER,
                            pixelOffset: new Cesium.Cartesian2(0, 0),
                            scaleByDistance: new Cesium.NearFarScalar(0, 1.25, 50000, 0.75),
                            backgroundColor: Cesium.Color.BLUE,
                            // showBackground: true,
                            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                            fillColor: Cesium.Color.WHITE,
                            outlineColor: Cesium.Color.WHITE,
                            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                            font: '14px sans-serif',
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 25000)
                        },
                        polygon: {
                            hierarchy: Cesium.Cartesian3.fromDegreesArray(lonlats),
                            material: Cesium.Color.fromRandom().withAlpha(0.5)
                            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(nearFar, 500000)
                        },
                        polyline: {
                            positions: Cesium.Cartesian3.fromDegreesArray(lonlats),
                            material: Cesium.Color.fromRandom().withAlpha,
                            clampToGround: true
                            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(nearFar, 500000)
                        },
                        show: false
                    }
                    this.entitiesPolygonPredictionRain2H.set(id, this.$viewer.entities.add(polyEntity))
                })
            })
        },
        creatPredictionRain(id, step) {
            this.PredictionRainParams.id = id
            this.PredictionRainParams.step = step
            this.clearImgYBJYLadar()

            this.$store.dispatch('mapLoadingText', ['请求预报降雨数据...'])
            var urlApi = '/api/EarlyWarning/GetGridRain'
            var prarms = {
                wswscd: this.basin,
                strMainId: id,
                iStep: step
            }
            this.$api.Get(urlApi, prarms).then(res => {
                this.hidePredictionRain()
                if (res.data.length < 1) {
                    Notification({
                        message: `无降雨区域`,
                        type: 'warning'
                    })
                    this.$store.dispatch('mapLoadingText', [])
                    return
                }
                res.data.forEach(item => {
                    if (item.color) {
                        var wscdIndex = Number(item.wscdIndex)
                        var polygonEntity
                        if (Number(step) === 2) {
                            polygonEntity = this.entitiesPolygonPredictionRain2H.get(wscdIndex)
                        } else {
                            polygonEntity = this.entitiesPolygonPredictionRain.get(wscdIndex)
                        }
                        if (polygonEntity) {
                            polygonEntity._label._text._value = item.drp.toString() + 'mm'
                            polygonEntity.drp = item.drp.toString() + 'mm'
                            polygonEntity.polygon.material = Cesium.Color.fromCssColorString(item.color).withAlpha(0.5)
                            polygonEntity.show = true
                        } else {
                            console.log(`wscdIndex:${wscdIndex}与网格编号不匹配`)
                        }
                    }
                })
                this.$store.dispatch('mapLoadingText', [])
            })
        },
        hidePredictionRain() {
            if (this.entitiesPolygonPredictionRain.size > 0) {
                this.entitiesPolygonPredictionRain.forEach((val, key) => {
                    val.show = false
                })
            }
            // 2H 的
            if (this.entitiesPolygonPredictionRain2H.size > 0) {
                this.entitiesPolygonPredictionRain2H.forEach((val, key) => {
                    val.show = false
                })
            }
        },
        clearImgYBJYLadar() {
            if (this.imgYBJYLadar) {
                this.$viewer.imageryLayers.remove(this.imgYBJYLadar)
                this.imgYBJYLadar = null
            }
        },
        clearPredictionRain() {
            if (this.entitiesPolygonPredictionRain.size > 0) {
                this.entitiesPolygonPredictionRain.forEach((val, key) => {
                    this.$viewer.entities.remove(val)
                })
                this.entitiesPolygonPredictionRain = new Map()
            }
            // 2H 的
            if (this.entitiesPolygonPredictionRain2H.size > 0) {
                this.entitiesPolygonPredictionRain2H.forEach((val, key) => {
                    this.$viewer.entities.remove(val)
                })
                this.entitiesPolygonPredictionRain2H = new Map()
            }
        }
    }
}
